<template>
  <div class="pending-status-container">
    <el-card shadow="never" class="pending-status-card">
      <div class="status-header">
        <h3>认定中</h3>
        <!-- 动态加载效果 -->
        <el-spinner class="loading-spinner" :size="40" />
      </div>
      <p>您的申请正在认定中，请耐心等待。</p>
      
      <!-- 动态进度条 -->
      <div class="progress-container">
        <div class="progress-bar"></div>
      </div>

      <!-- 已提交证明材料和获奖证明 -->
      <div class="submitted-details">
        <div>
          <el-form-item label="获奖全名">
            <el-input
              v-model="rewardTitile"
              @input="handleTitleChange"
              placeholder="请输入获奖全名"
              class="competition-name-input"
              :maxlength="50"
            />
          </el-form-item>
        </div>

        <div>
          <el-form-item label="获奖时间">
            <el-date-picker
              v-model="awardDate"
              placeholder="请选择日期和时间" 
              type="datetime"
              style="width: 100%;" 
              format="YYYY/MM/DD HH:mm:ss"
              @change="handleAwardDateChange"
            />
          </el-form-item>
        </div>

        <el-upload
          ref="upload"
          class="upload-demo"
          action="#"
          :limit="1"
          :auto-upload="false"
          :file-list="fileList"
          :on-change="handleFileChange"
          :before-upload="beforeUpload"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          :on-preview="handlePreview"
          style="margin-top: 20px"
        >
          <template v-slot:trigger>
            <el-button type="primary">重新上传证明文件</el-button>
          </template>
        </el-upload>
      </div>

      <!-- 提交按钮 -->
      <div class="actions" style="margin-top: 20px;">
        <el-button :disabled="isSubmitDisabled" @click="submitModification" type="success">提交修改</el-button>
      </div>
    </el-card>
          <!-- 图片预览窗口
          <el-dialog
            title="图片预览"
            v-model="previewVisible" 
            width="50%"
          >
            <img :src="previewPath" class="previewImg" />
        </el-dialog> -->
        <el-dialog
            title="文件预览"
            v-model="previewVisible"
            width="80%"
            top="5vh"
            :fullscreen="false" 
            class="preview-dialog"
          >
            <template #default>
              <div v-if="previewPath.endsWith('.pdf')" class="pdf-container">
                <iframe
                  :src="previewPath"
                  alt="PDF 预览"
                  class="pdf-preview"
                  frameborder="0"
                />
              </div>
              <div v-else>
                <img :src="previewPath" alt="图片预览" class="image-preview" />
              </div>
            </template>
  </el-dialog>
  </div>
</template>

  
  <script>
  import { getUploadFile, uploadFile } from "@/api/competition/index.js"; // 导入两个接口
  import { convertISOToBasicString } from "@/utils/common1.js";

  export default {
    props: {
    // 接收父组件传来的竞赛申请数据
    application: Object
  },
    data() {
      return {
        rewardTitile: "", // 竞赛全名
        initialAwardDate: "",//获奖时间
        awardDate: "",
        fileList: [], // 上传的文件列表
        initialrewardTitile: "", // 初始化时的竞赛全名
        initialFileList: [], // 初始化时的文件列表
        isChangeTitle: false, // 标识竞赛全名是否有变化
        previewPath:'',//图片预览地址
        previewVisible: false, //控制图片预览窗口的显示与隐藏
      };
    },
    computed: {
      // 判断提交按钮是否禁用
      isSubmitDisabled() {
        // 如果竞赛全名或文件有变化，提交按钮启用
        return this.rewardTitile === this.initialrewardTitile && this.isFileListUnchanged &&this.awardDate === this.initialAwardDate;
      },
      // 判断文件是否有变化
      isFileListUnchanged() {
        if (this.fileList.length !== this.initialFileList.length) return false;
        return this.fileList.every((file, index) => {
          return file.name === this.initialFileList[index].name && file.status === this.initialFileList[index].status;
        });
      }
    },
    methods: {
      updatePreviewPath() {
        if (this.fileList.length > 0) {
          const file = this.fileList[0];

          // 如果文件有 URL，直接使用 URL 进行预览
          if (file.url) {
            this.previewPath = file.url;
            console.log("当前文件的 URL 为：", file.url);
          } 
          // 如果文件是图片，且具有 raw 数据，通过 FileReader 读取
          else if (file.raw) {
            const fileExtension = file.name.toLowerCase().slice(file.name.lastIndexOf('.'));
            const validImageTypes = ['.jpg', '.jpeg', '.png', '.gif'];
            
            // 判断是否是有效的图片
            if (validImageTypes.includes(fileExtension) ) {
              console.log("当前文件无 URL，正在用 FileReader 读取文件...");
              const reader = new FileReader();
              reader.onload = (e) => {
                this.previewPath = e.target.result; // 使用 FileReader 读取文件内容
              };
              reader.readAsDataURL(file.raw); // 读取为数据URL，适用于图像
            } else {
              console.log("该文件无法预览：", file.name);
              this.previewPath = ''; // 如果不是图片，清空预览路径
            }
          } else {
            console.log("该文件无法预览，缺少有效数据：", file.name);
            this.previewPath = ''; // 如果没有 URL 或 raw 数据，清空预览路径
          }
        } else {
          this.previewPath = ''; // 清空预览路径
        }
},

      handleAwardDateChange(newDate) {
      this.awardDate = convertISOToBasicString(newDate);
      if (this.awardDate !== this.initialAwardDate) {
        this.isChangeTitle = true; // 标记为true，表示竞赛时间修改了
      }
    },
    async handlePreview(file) {
      if(this.previewPath == ""){
        this.$message.error("不支持在线查看该文件")
        return;
      }
      this.previewVisible = true;
    },

      handleTitleChange() {
      // 当竞赛全名发生变化时，标记为需要重新上传文件
      if (this.rewardTitile !== this.initialrewardTitile) {
        this.isChangeTitle = true; // 标记为true，表示竞赛全名已修改
      }
  },
      // 校验文件上传类型
      // 在 before-upload 中进行文件类型检查
      beforeUpload(file) {
        console.log("进入到before upload中")
        if (!file || !file.name) {
          this.$message.error('文件无效');
          return false; // 如果没有文件名，直接返回 false
        }
          // 使用文件扩展名来判断文件类型
          const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf'];
          const fileExtension = file.name.toLowerCase().slice(file.name.lastIndexOf('.')); // 获取文件扩展名

          console.log("文件扩展名：", fileExtension); // 输出文件扩展名，确认是否正确

          if (!validExtensions.includes(fileExtension)) {
            this.$message.error('只能上传图片或PDF文件');
            return false; // 阻止文件上传
          }

          return true; // 允许上传
        },
      // 文件变化时处理
      handleFileChange(file, fileList) {
          console.log("文件变化了", file); // 输出文件对象，查看文件信息

          if (!file || !file.name) {
            console.log("无效文件，跳过");
            return; // 如果文件无效，直接跳过
          }

          // 使用文件扩展名来判断文件类型
          const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf'];
          const fileExtension = file.name.toLowerCase().slice(file.name.lastIndexOf('.')); // 获取文件扩展名

          console.log("文件扩展名：", fileExtension); // 输出文件扩展名，确认是否正确

          if (!validExtensions.includes(fileExtension)) {
            this.$message.error('只能上传图片或PDF文件');
            // 如果文件不符合要求，在这里清除文件列表
            this.fileList = fileList.filter(f => {
            const fileExtension = f.name.toLowerCase().slice(f.name.lastIndexOf('.'));
            const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf'];
            return validExtensions.includes(fileExtension);
          });
          return;
          }

          // 处理有效的文件
          this.fileList = fileList.map((f) => {
            if (!f.raw) {
              f.raw = f.originFileObj || f; // 确保 raw 属性存在
            }

            // 如果是 PDF 文件，设置预览路径
            if (f.type === "application/pdf") {
              f.url = URL.createObjectURL(f.raw);  // 为 PDF 文件创建 URL
            }
            return f;
          });

          this.updatePreviewPath(); // 更新预览路径
        },

    // 文件数量超出时的处理
    handleExceed(files) {
      const file = files[0];
      // 检查 file 和 file.type 是否有效
      if (!file ) {
        this.$message.error('文件无效');
        return false; // 如果没有文件名，直接返回 false
      }

          // 使用文件扩展名来判断文件类型
          const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf'];
          const fileExtension = file.name.toLowerCase().slice(file.name.lastIndexOf('.')); // 获取文件扩展名

          console.log("文件扩展名：", fileExtension); // 输出文件扩展名，确认是否正确

          if (!validExtensions.includes(fileExtension)) {
            this.$message.error('只能上传图片或PDF文件');
            return;
          }
      this.$refs.upload.clearFiles(); // 清空当前文件
      file.uid = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`; // 生成唯一 ID
      file.raw = file.originFileObj || file; // 确保 raw 属性存在
      this.fileList = [file]; // 更新为仅包含一个文件
      this.isChangeTitle = false;
},

      // 文件删除时处理
      handleRemove(file, fileList) {
      this.fileList = []; // 清空文件列表
      this.updatePreviewPath(); // 更新预览路径
      this.$message.success("文件已删除");
      },
      
      // 提交修改操作
      async submitModification() {
        if (!this.rewardTitile) {
          this.$message.error('请填写竞赛全名');
          return;
        }

        if(!this.awardDate){
          this.$message.error("请选择获奖时间");
          return;
        }
        // 如果修改了竞赛全名，强制要求重新上传文件
        if (this.isChangeTitle ) {
          this.$message.error('请重新上传证明文件');
          return;
        }
        if(this.fileList.length === 0){
          this.$message.error('请上传证明文件');
          return;
        }

        // 这里可以执行提交的相关逻辑，打印提交的文件信息
        console.log('修改后的数据:', {
          applicationId: this.application.id,
          rewardTitile: this.rewardTitile,
          awardDate: this.awardDate,
          fileList: this.fileList[0], // 只取第一个文件
        });

        try {
          let data = await uploadFile(this.application.id, this.fileList[0].raw, this.rewardTitile,this.awardDate);
          if (!data.code) {
            this.$message.success('提交成功');
            this.$emit("hanleQeury");
          } else {
            this.$message.error('提交失败，请重试');
          }
        } catch (error) {
          console.error('提交失败:', error);
          this.$message.error('提交失败，请检查网络或稍后再试！');
        }

        // 通知父组件关闭 dialog
        this.$emit('closeDialog');
},
      async fetchSubmittedDetails() {
          // 假设从后端获取的数据
          const data  = await getUploadFile(this.application.id)
          const backendData = data.data
          console.log("code:",backendData)
           // 将后端数据映射到前端所需的格式
          const submittedData = {
            rewardTitile: backendData.rewardTitle,
            awardDate: backendData.rewardTime,
            fileList: [
              {
                name: backendData.fileUrl.split('/').pop(), // 从URL中提取文件名
                url: backendData.fileUrl,
                status: "success", // 模拟文件上传状态
              },
            ],
          };

          // 设置初始值
          this.initialrewardTitile = submittedData.rewardTitile;
          this.initialAwardDate = submittedData.awardDate;
          this.initialFileList = submittedData.fileList.map(file => ({
            ...file,
            status: 'success', // 模拟文件上传状态
          }));

          // 更新当前的竞赛全名和获奖时间和文件列表
          this.rewardTitile = submittedData.rewardTitile;
          this.awardDate = submittedData.awardDate;
          this.fileList = submittedData.fileList;
          this.previewPath = backendData.fileUrl;
}

    },
    created() {
      // 在组件创建时可以获取已提交的信息（这里假设已经提交过文件和竞赛全名）
      this.fetchSubmittedDetails();
    },
    watch: {
      fileList: {
        deep: true,
        handler() {
          this.updatePreviewPath();
        },
      },
    },
  };
  </script>
  
  <style scoped>
  .pending-status-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }
  
  .pending-status-card {
    width: 100%;
    max-width: 600px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .status-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
  }
  
  h3 {
    color: #f0ad4e;
    margin-right: 10px;
    font-size: 20px;
  }
  
  p {
    color: #757575;
    font-size: 16px;
    margin-top: 10px;
  }
  
  .loading-spinner {
    margin-left: 10px;
    color: #f0ad4e;
  }
  
/* 动态进度条样式 */
.progress-container {
  width: 100%;
  height: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  margin-top: 20px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #f0ad4e;
  animation: loading 4s linear infinite;
}

/* 动态加载时进度更新 */
@keyframes loading {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

  
  .submitted-details {
    width: 100%;
    margin-top: 20px;
  }
  
  .actions {
    display: flex;
    justify-content: flex-end;
  }
  
  .upload-demo {
    margin-top: 10px;
  }

/* 预览对话框样式 */
.preview-dialog {
  max-height: 90vh; /* 限制最大高度为视口 90% */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* PDF 预览容器 */
.pdf-container {
  width: 100%;
  height: calc(90vh - 50px); /* 内容最大高度为视口的 90%，减去标题和边距 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* PDF 预览 iframe 样式 */
.pdf-preview {
  width: 100%;
  height: 100%;
  border: none; /* 去掉边框 */
}

/* 图片预览样式 */
.image-preview {
  max-width: 100%;
  max-height: calc(90vh - 50px); /* 图片最大高度为视口高度 */
  object-fit: contain;
  margin: auto;
}
/* 可选：移除对话框多余的内边距和文本对齐 */
.el-dialog__body {
  padding: 0;
  text-align: center; /* 居中显示 */
}

  </style>
  